/* 整个页面背景颜色：非常淡蓝色 */
body {
    background-color: #f1faff; /* 非常淡蓝色 */
    font-family: Arial, sans-serif;
    padding: 0;
    margin: 0;
}

/* 页面右上角导航栏样式 */
.navbar {
    position: fixed;
    top: 10px; /* 离顶部 10px */
    right: 10px; /* 离右侧 10px */
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微阴影，形成镶边效果 */
    border-radius: 10px;
    padding: 10px;
    z-index: 9999; /* 确保导航栏在页面其他内容上方 */
    transition: top 0.3s ease; /* 平滑过渡 */
}

/* 导航链接样式 */
.nav-link {
    padding: 10px 20px;
    color: #555; /* 默认文字颜色 */
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    margin-right: 10px; /* 给按钮之间增加空隙 */
    display: inline-block;
    transition: color 0.3s ease; /* 过渡效果，使得颜色变化更加平滑 */
}

.nav-link:hover {
    color: #800080; /* 鼠标悬停时文字变为紫色 */
    background-color: #f0f0f0; /* 鼠标悬停时背景变为浅灰色 */
}

.nav-link:last-child {
    margin-right: 0; /* 最后一个按钮去掉右边的空隙 */
}



/* 侧边栏样式：隐藏和显示效果 */
.sidebar-container {
    position: fixed;
    top: 0;
    left: 0; /* 默认显示侧边栏 */
    width: 250px;
    height: 100%;
    background-color: #e1f8e1;
    transition: left 0.3s ease;
    z-index: 9999;
}
/* 
.sidebar-toggle {
    position: fixed;
    left: 250px;
    top: 50%;
    background-color: #fff;
    padding: 10px;
    cursor: pointer;
    z-index: 10000;
    border-radius: 50%;
    transition: left 0.3s ease;
} */
/* 侧边栏按钮样式 */
.sidebar-toggle {
    position: fixed;
    top: 50%;  /* 让按钮垂直居中 */
    left: 250px;  /* 默认按钮位置在侧边栏右侧 */
    background-color: #fff;
    padding: 10px;
    cursor: pointer;
    z-index: 10000;
    border-radius: 50%;
    transition: left 0.3s ease; /* 添加平滑过渡效果 */
}

/* 侧边栏按钮移到最左侧的样式 */
.sidebar-toggle.move-left {
    left: 0;  /* 当侧边栏隐藏时，按钮移到页面最左侧 */
}

/* 侧边栏容器的样式 */
.sidebar-container {
    position: fixed;
    top: 0;
    left: 0;  /* 默认显示侧边栏 */
    width: 250px;
    height: 100%;
    background-color: #e1f8e1;
    transition: left 0.3s ease;
    z-index: 9999;
}




.sidebar-toggle span {
    font-size: 20px;
}

/* 设置侧边栏内容的样式 */
.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 20px;
}

.profile-container {
    background-color: #e1f8e1; /* 淡绿色 */
    padding: 20px;
    border-radius: 10px;
}

/* 新月排期框的样式：浅绿色背景 */
.schedule-box {
    background-color: #f4fff4 !important; /* 使用 !important 强制应用背景颜色 */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.schedule-header h2 {
    font-family: 'Poppins', sans-serif;  /* 使用圆润字体 Poppins */
    color: #5a5a5a; /* 保持原有颜色 */
    font-size: 40px; /* 字体大小，可以根据需求调整 */
    text-align: center;
    font-weight: 600;  /* 让字体更为突出 */
}

.schedule-img img {
    width: 100%;
    border-radius: 8px;
}

/* 新月排期图片透明度 */
.schedule-img img {
    opacity: 0.7; /* 设置透明度为60% */
    transition: opacity 0.3s ease; /* 添加平滑过渡效果 */
}

/* about */

/* 页面背景 */
.about-page {
    background-color: #f1faff; /* 淡蓝色背景 */
    padding: 50px 0;
    min-height: 100vh;
}

/* 页面右上角导航栏 */
.navbar {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 10px;
    z-index: 9999;
}

/* 导航链接样式 */
.nav-link {
    padding: 10px 20px;
    color: #555;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    margin-right: 10px;
    display: inline-block;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #800080;
    background-color: #f0f0f0;
}

/* 动态字体样式 */
.dynamic-text {
    text-align: left;
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeInUp 1s forwards;
}
.dynamic-paragraph {
    font-size: 18px;
    color: #333;
    line-height: 1.8;
    opacity: 0;
    animation: fadeInUp 1s forwards;
}

/* 动态字体动画 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.dynamic-paragraph:nth-child(odd) {
    animation-delay: 0.5s;
}

.dynamic-paragraph:nth-child(even) {
    animation-delay: 1s;
}
/* 图片样式 */
/* .newspaper-image {
    width: 100%;              
    max-width: 100px;         
    height: auto;             
    margin: 10px 0;           
    border-radius: 8px;       
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards; 
} */
/* 图片容器 */
.newspaper-image-container {
    display: inline-block;  /* 使容器内的内容并排显示 */
    max-width: 100%;        /* 最大宽度为容器的100% */
    margin: 10px 0;         /* 上下留空 */
    padding: 5px;
    text-align: center;     /* 图片居中显示 */
}
/* 图片样式 */
.newspaper-image {
    width: 100%;             /* 图片宽度占满容器 */
    height: auto;            /* 高度自动以保持比例 */
    max-width: 500px;        /* 最大宽度为500px */
    border-radius: 8px;      /* 给图片添加圆角 */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards; /* 添加动画效果 */
}
/* 报纸式排版内容 */
.newspaper-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    margin-top: 40px;
}
.newspaper-item {
    background-color: rgba(244, 224, 197, 0.2); /* 设置透明度50%的背景色 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards;
    transition: background-color 0.3s ease; /* 添加背景色过渡效果 */
}
.newspaper-item img {
    width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}
.newspaper-item p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
}
.newspaper-item.center {
    text-align: center;
}
.newspaper-item.center-image {
    width: 70%;  /* 图片居中并调整大小 */
    margin: 0 auto;
}


.dynamic-heading {
    margin-top: 10px;
    font-family: 'Pacifico', cursive;
    font-size: 48px;
    color: #00aaff;
    text-align: left;
}
.dynamic-mid {
    margin-top: 40px;
    font-family: 'Pacifico', cursive;
    font-size: 48px;
    color: #00aaff;
    text-align: center;
}
.dynamic-ending {
    margin-top: 10px;
    font-family: 'Pacifico', cursive;
    font-size: 48px;
    color: #00aaff;
    text-align: right;
}
/* 动态显示报纸内容 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.newspaper-item:nth-child(odd) {
    animation-delay: 0.5s; /* 设置延时动画效果 */
}

.newspaper-item:nth-child(even) {
    animation-delay: 1s;
}




/* 修改间距和使添加留言浮动在页面底部 */

/* 修改表单样式，让它成为一个细细的横条，背景为绿色 */
.form-container {
    position: fixed;  /* 固定在页面底部 */
    bottom: 0;        /* 紧贴底部 */
    left: 0;          /* 让它从左边开始 */
    width: 100%;      /* 表单宽度占满整个页面 */
    background-color: #e1f8e1; /* 背景色为绿色 */
    padding: 20px 20px;  /* 增加内边距 */
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
    display: flex;    /* 使用 flexbox 排列内容 */
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 内容左对齐 */
    z-index: 1000;    /* 确保它在其他元素之上 */
}

/* "添加留言" 字体大小调整 */
.form-container h2 {
    color: #555;
    font-size: 14px;  /* 变小字体 */
    margin: 0;        /* 去掉默认的外边距 */
    text-align: left; /* 左对齐 */
    flex-basis: 100%; /* 让它占据整行 */
    margin-bottom: 20px; /* 下方增加间距 */
}

/* 表单中的输入框和按钮样式 */
.form-container form {
    display: flex;
    width: 100%;             /* 让表单宽度占满父容器 */
    flex-direction: column;  /* 设置为竖直排列 */
    align-items: flex-start; /* 让表单内容靠左对齐 */
}

.form-container form .input-group {
    display: flex;        /* 使用 flexbox 使两个输入框并排 */
    gap: 10px;            /* 设置两个输入框之间的间距 */
    width: 100%;          /* 使输入框占满父容器 */
    margin-bottom: 10px;  /* 输入框之间增加间距 */
}

.form-container form .input-label {
    font-size: 14px;      /* 设置标签字体大小 */
    margin-right: 10px;   /* 标签与输入框之间的间距 */
    width: 80px;          /* 标签的固定宽度 */
    flex-shrink: 0;       /* 防止标签被压缩 */
}

/* 输入框样式 */
.form-container form input,
.form-container form textarea {
    height: 30px;          /* 设置输入框高度 */
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;       /* 设置字体大小 */
    flex: 1;               /* 使输入框自适应宽度 */
}

/* 修改提交按钮的样式，并将其靠右对齐 */
.form-container form button {
    padding: 8px 15px;
    background-color: #f4e0c5; /* 按钮橙色 */
    color: #333;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    align-self: flex-end;  /* 将按钮对齐到右边 */
}

.form-container form button:hover {
    background-color: #f1d0a7; /* 按钮悬浮时变浅 */
}

/* 输入框和文本框聚焦时的效果 */
.form-container form input:focus,
.form-container form textarea:focus {
    border-color: #f4e0c5;
    outline: none;
}

/* 留言框样式 */
.message-box {
    background-color: rgba(244, 224, 197, 0.5); /* 设置透明度50%的背景色 */
    padding: 15px; /* 内边距，增加留言框的舒适感 */
    border-radius: 10px; /* 圆角效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 给留言框添加轻微阴影 */
    margin-bottom: 20px; /* 留言框之间的间距 */
    transition: background-color 0.3s ease; /* 添加背景色过渡效果 */
}

.message-box:hover {
    background-color: rgba(244, 224, 197, 0.7); /* 悬停时稍微加深背景色 */
}

/* 留言的用户ID样式 */
.message-box .user-id {
    font-weight: bold; /* 用户ID加粗 */
    margin-bottom: 10px; /* 给用户ID和内容之间留点空间 */
    color: #333; /* 设置字体颜色为深色 */
}

/* 留言的时间样式 */
.message-box .created-at {
    font-size: 12px; /* 时间字体小一点 */
    color: #777; /* 时间文字的颜色稍微浅一些 */
    margin-top: 10px; /* 留言内容与时间之间留点空隙 */
}

/* 删除按钮样式 */
.delete-button {
    color: #a28eeb; /* 浅紫色 */
    text-decoration: none; /* 去掉下划线 */
    font-weight: bold; /* 删除按钮加粗 */
    margin-top: 10px;
    display: inline-block;
    transition: color 0.3s ease; /* 添加过渡效果 */
}

.delete-button:hover {
    color: #c00; /* 鼠标悬停时颜色加深 */
    text-decoration: underline; /* 悬停时加下划线 */
}

/* 在留言框聚焦时添加提示 */
.message-box:focus-within {
    border: 2px solid rgba(244, 224, 197, 0.8); /* 聚焦时框框边界加亮 */
}
